<template>
  <views class="sensitiveWord">
    <!-- 新增 -->
    <el-dialog
      :title="type?'修改敏感词':'新增敏感词'"
      :visible.sync="dialogVisible_add"
      width="30%"
      :before-close="handleClose_add"
      :close-on-click-modal="false"
    >
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item label="敏感词:">
          <el-input v-model="form.world"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer flex flexR center flexJp">
        <el-button @click="dialogVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="saveSenWord(id||false)">确 定</el-button>
      </span>
    </el-dialog>

    <div class="sensitiveWord-title flex flexR center">
      <viewTitle :title="'敏感词列表'" :border="true"></viewTitle>
      <div class="add_sensitiveWord">
      <el-button type="primary" size="small" @click="change_word(0)">新增</el-button>
      </div>
    </div>
    <!--<el-form ref="form" label-width="80px" :inline="true">-->
    <!--<div class="search_list">-->
      <!--<div class="inputW flex flexR center">-->
      <!--<el-form-item>-->
        <!--<div class="search_unit">-->
          <!--<el-button type="danger" @click="change_word(0)">新增</el-button>-->
          <!--&lt;!&ndash;<el-button type="primary" size="small" @click="change_word(0)">新增</el-button>&ndash;&gt;-->
        <!--</div>-->
      <!--</el-form-item>-->
      <!--</div>-->
    <!--</div>-->
    <!--</el-form>-->
    <div class="table_list">
      <el-table
        border
        :data="tableData"
        style="width: 50%;max-width:100%;"
        :header-cell-style="getRowClass"
        :select-on-indeterminate="true"
        :fit="true"
        :lazy="true"
        max-height="450"
      >
        <el-table-column fixed="left" type="index" label="序号" width="150"></el-table-column>
        <el-table-column prop="sen_word_name" label="敏感词" width="auto"></el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope" class="table_operation flex flexR">
            <el-button type="success" @click="change_word(1,scope.row.sen_word_id, scope.row.sen_word_name)">修改</el-button>
            <!-- 待审核中的状态，可以进行审核 -->
            <el-button type="danger" @click="delete_word(scope.row.sen_word_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex flexR paging">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="total, sizes,prev, pager, next, jumper"
          @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
          @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible_add: false,
      form: {
        world: "" //  敏感词
      },
      type: 0, // 0  新增  1 修改
      pagination: {
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      },
      id: null // 当前敏感id
    };
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    //     删除敏感词
    delete_word(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
              this.delWorld(id)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //     修改敏感词 - 新增敏感词
    change_word(val, id, content) {
      this.dialogVisible_add = true;
      this.type = val;
      this.id = id || null;
      this.form.world = content || null;
    },
    //     新增关闭
    handleClose_add() {
      this.dialogVisible_add = null;
    },
    //     获取敏感词列表
    getData() {
      let self = this;
      this.$raxios
        .post(this.$mapapi.senWordList, {
          data: {
            pagination: this.pagination
          }
        })
        .then(res => {
          if (res.code != 200 && res.code != 501)
            return Promise.reject(res.msg);
          self.tableData = res.data.list || [];
          self.pagination = res.data.pagination || {};
        })
        .catch(res => {
          this.$message.error(res);
        });
    },
    saveSenWord(id) {
      let data = {
          sen_word_name: this.form.world
        },
        self = this;
      if (!data.sen_word_name) {
        this.$message.error("敏感词不能为空");
        return;
      }
      id ? (data.sen_word_id = id) : null;
      this.$raxios
        .post(this.$mapapi.saveSenWord, { data: data })
        .then(res => {
          if (res.code != 200 && res.code != 501)
            return Promise.reject(res.msg);
          self.$message.success(id ? "修改成功" : "新增成功");
          self.dialogVisible_add = null;
          self.getData();
        })
        .catch(res => {
          self.$message.error(res);
        });
    },
    delWorld(id) {
      let self = this;
      if (id) {
        this.$raxios
          .post(this.$mapapi.delSenWord, { data: { sen_word_id: id } })
          .then(res => {
            if (res.code != 200 && res.code != 501)
              return Promise.reject(res.msg);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            self.getData();
          })
          .catch(res => {
            self.$message.error(res);
          });
      }
    }
  },
  created() {},
  mounted() {
    this.getData();
  }
};
</script>

<style lang="less" scope="true"  src="@/style/system/sensitiveWord.less">
</style>